<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <link rel="stylesheet" href="../static/index.css">
  <script src="../static/vue.js"></script>
  <link rel="stylesheet" href="../static/element_index.css">
  <script src="../static/index.js"></script>
  <script src="../static/axios.min.js"></script>
</head>

<body>
  <div id="app">
    <el-button v-on:click="getLog">日志</el-button>
    <div class="home">
      <div class="cards">
        <div>
          <el-input placeholder="请输入内容" v-model="name">
            <template slot="prepend">歌曲名</template>
          </el-input>
          <el-button type="primary" round v-on:click="getMusic">提交</el-button>
          <p v-if="datas" v-text="datas['name']"></p>
          <p v-if="datas" v-text="artists"></p>
        </div>
      </div>
      <div class="cards">
        <div>
          <el-input placeholder="请输入内容" v-model="imgurl">
            <template slot="prepend">数字图片</template>
          </el-input>
          <el-button type="primary" round v-on:click="getNum">提交</el-button>
          <p v-if="num" v-text="num"></p>
        </div>
      </div>
      <div class="cards">
        <div>
          <el-input placeholder="请输入内容" v-model="info.sex">
            <template slot="prepend">性别</template>
          </el-input>
          <el-input placeholder="请输入内容" v-model="info.height">
            <template slot="prepend">身高（cm）</template>
          </el-input>
          <el-input placeholder="请输入内容" v-model="info.weight">
            <template slot="prepend">体重（kg）</template>
          </el-input>
          <el-button type="primary" round v-on:click="getBmi">提交</el-button>
          <p v-if="bmi" v-text="bmi"></p>
        </div>
      </div>
    </div>
  </div>

</body>
<script>
  var vm = new Vue({
    el: "#app",
    data() {
      return {
        name: "",
        datas: [],
        artists: "",
        city: "",
        num: "",
        info: {
          sex: "",
          height: "",
          weight: ""
        },
        bmi: "",
        imgurl: ""
      }
    },
    methods: {
      getLog(){
        window.location.href = "http://localhost:5000/view"
      },
      getMusic() {
        axios.get("http://localhost:5000/music", { params: { name: this.name } }).then(rep => {
          this.datas = rep.data["music_result"][0]
          this.artists = rep.data["music_result"][0]['artists'][0]['name']
          print(this.datas)
        })
      },
      getNum() {
        axios.get("http://localhost:5000/number", { params: { url: this.imgurl } }).then(rep => {
          this.num = "值为：" + rep.data["air"]
        })
      },
      getBmi() {
        axios.get("http://localhost:5000/bmisearch", { params: this.info }).then(rep => {
          let result = rep.data.result
          this.bmi = "bmi:" + result["bmi"] + "  等级:" + result["level"] + "  正常BMI:" + result["normbmi"] + "  理想体重:" + result["idealweight"]
        })
      }
    }
  })
</script>

</html>